<template>
  <span>
    <el-button type="cyan" :size="size" @click="action('revoke')"
      >同步
    </el-button>
    <Modal
      :mask-closable="false"
      v-model="dataSource"
      title="选择数据源"
      width="50%"
      :transfer="false"
      @on-cancel="handleBatchTransferDialogReset"
    >
      <div>
        <Alert type="success" show-icon closable>
          说明
          <span slot="desc"
            >下面列表的数据源可以在&nbsp;&nbsp;<router-link
              :to="{ path, params, query }"
              >数据管理->数据库连接模块</router-link
            >&nbsp;&nbsp;进行配置
          </span>
        </Alert>
        <el-form
          ref="batchTransferDialogForm"
          :model="batchTransferDialogForm"
          label-width="160px"
        >
          <el-form-item label="数据源" prop="type">
            <el-checkbox-group
              v-model="batchTransferDialogForm.datasourceList"
              @change="handleCheckedCitiesChange"
            >
              <el-checkbox
                v-for="item in datasourceList"
                :label="item.enName"
                :key="item.enName"
                >{{ item.dbName }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>

          <!--          <el-form-item label="新处理人">-->
          <!--            <Button-->
          <!--              v-for="(item,index) in addSubTask.usersInfo"-->
          <!--              v-model="addSubTask.handlerId"-->
          <!--              type="primary"-->
          <!--              style="margin-left: 2px"-->
          <!--              color="primary"-->
          <!--              @click="delCommonUsers(index)"-->
          <!--            >-->
          <!--              {{ item.fullname }} &nbsp;<Icon type="md-close"/>-->

          <!--            </Button>-->
          <!--            <Button type="error" @click="selectUsers(0)">-->
          <!--              <Icon type="ios-contact"/>-->
          <!--              处理人-->
          <!--            </Button>-->
          <!--          </el-form-item>-->
        </el-form>
      </div>
      <div slot="footer">
        <Button @click="handleBatchTransferDialogReset">取消</Button>
        <Button type="primary" @click="addBatchTransferHandler">确定</Button>
      </div>
    </Modal>
  </span>
</template>
<script>
import {
  listDatasource,
  synchronizationData,
} from "@/api/datasource/datasource";

export default {
  props: {
    value: {
      type: Array,
      default: () => ([]),
    },
    tableName: {
      type: String,
      default: "",
    },
    size: {
      type: String,
      default: "mini",
    },
  },
  created() {
    var val = this.value;
    if (val) {
      this.getProcessInstanceInfo(val);
    }
  },
  data() {
    return {
      path: "/datasource/datasource/index",
      params: null,
      query: null,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        createBy: null,
        createTime: null,
        dbName: null,
        enName: null,
        driver: null,
        host: null,
        name: null,
        port: null,
        type: null,
        userName: null,
        password: null,
        url: null,
      },
      batchTransferDialogForm: {
        datasourceList: [],
      },
      dataSource: false,
      datasourceList: [],
      isRuning: true,
    };
  },
  methods: {
    addBatchTransferHandler() {
      var ids = [];
      if (this.value) {
        //id
        ids = this.value.map((x) => {
          return x.id;
        }); // 生成数组
      }
      var form = {};
      form["tableName"] = this.tableName;
      form["ids"] = ids;
      form["datasourceList"] = this.batchTransferDialogForm.datasourceList;
      if (this.batchTransferDialogForm.datasourceList) {
        synchronizationData(form).then((response) => {
          if (response.code == 0) {
            this.$message({
              duration: "800",
              message: "同步成功",
              type: "success",
              customClass: "zZindex",
            });
            this.dataSource = false;
          } else {
            this.$message({
              duration: "800",
              message: "没有权限操作",
              type: "warning",
              customClass: "zZindex",
            });
          }
        });
      } else {
        this.$message({
          duration: "800",
          message: "请选择需要同步的数据库",
          type: "warning",
          customClass: "zZindex",
        });
        return;
      }
    },

    handleCheckedCitiesChange(value) {
      this.batchTransferDialogForm.datasourceList = value;
    },
    /** 查询数据库连接列表 */
    getList() {
      listDatasource(this.queryParams).then((response) => {
        this.datasourceList = response.data;
      });
    },
    handleBatchTransferDialogReset() {
      this.dataSource = false;
    },
    action: function (action) {
      this.getList();
      this.batchTransferDialogForm.datasourceList = [];
      this.dataSource = true;
    },
    go: function () {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.go(-1);
    },
    getProcessInstanceInfo: function (val) {},
  },
  watch: {
    newVal(newV, oldV) {},
    taskId(val) {
      this.taskId = val;
    },
  },
};
</script>
<style lang="scss" scoped>
/* button color */
.el-button--cyan.is-active,
.el-button--cyan:active {
  background: #20b2aa;
  border-color: #20b2aa;
  color: #ffffff;
}

.el-button--cyan:focus,
.el-button--cyan:hover {
  background: #48d1cc;
  border-color: #48d1cc;
  color: #ffffff;
}

.el-button--cyan {
  background-color: #20b2aa;
  border-color: #20b2aa;
  color: #ffffff;
}

/* text color */
.text-navy {
  color: #1ab394;
}

.text-primary {
  color: inherit;
}

.text-success {
  color: #1c84c6;
}

.text-info {
  color: #23c6c8;
}

.text-warning {
  color: #f8ac59;
}

.text-danger {
  color: #ed5565;
}

.text-muted {
  color: #888888;
}

/* image */
.img-circle {
  border-radius: 50%;
}

.img-lg {
  width: 120px;
  height: 120px;
}

.avatar-upload-preview {
  position: absolute;
  top: 50%;
  transform: translate(50%, -50%);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  box-shadow: 0 0 4px #ccc;
  overflow: hidden;
}

/* 拖拽列样式 */
.sortable-ghost {
  opacity: 0.8;
  color: #fff !important;
  background: #42b983 !important;
}

.top-right-btn {
  position: relative;
  float: right;
}

.main-div {
  background-color: white !important;
}
</style>
